@extends('admin.layout.base')
@section('styles')
    <style>
        .ad-img {
            width: 210px;
            height: 140px;
            border: 1px dashed #d9d9d9;
            display: block;
        }
        .ad-uploader-icon {
            cursor: pointer;
            font-size: 28px;
            color: #8c939d;
            width: 210px;
            height: 140px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            line-height: 150px;
            text-align: center;
        }
    </style>
    {{--级联多选--}}
    <link href="{{ asset('//unpkg.com/element-ui@2.9.2/lib/theme-chalk/index.css') }}" rel="stylesheet">
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <el-form :model="form" ref="form" class="form" label-width="100px">
                <div class="panel-header"> <div class="panel-title"> 基本信息 </div> </div>
                <div class="panel-main">
                    <el-form-item :rules="[{ required: true, message: '请填写店铺名', trigger: 'blur'}]" label="店铺名：" prop="store_name">
                        <el-input clearable v-model="form.store_name" placeholder="请填写店铺名"></el-input>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请填写店主卖家用户名', trigger: 'blur'}]" label="用户名：" prop="seller_name">
                        <el-input clearable v-model="form.seller_name" placeholder="请填写店主卖家用户名"></el-input>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请选择类目', trigger: 'blur'}]" label="类目：" prop="cate_id">
                        <el-cascader
                                separator=">"
                                expand-trigger="hover"
                                :options="categoys"
                                :props="props"
                                v-model="form.cate_id"
                                clearable>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请上传LOGO', trigger: 'blur'}]" label="LOGO：" prop="logo">
                        <el-upload class="ad-uploader" name="image"
                                :action="upload_image"
                                :show-file-list="false"
                                :limit="1"
                                :on-success="uploadSuccess"
                                :before-upload="uploadBefore">
                            <img v-if="form.logo" :src="form.logo" class="ad-img">
                            <i v-else class="el-icon-plus ad-uploader-icon"></i>
                            <div slot="tip" class="el-upload__tip">图片大小不能超过 2MB，建议尺寸3:2!</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请填写店铺描述', trigger: 'blur'}]" label="描述：" prop="description">
                        <div id="editor"></div>
                    </el-form-item>
                </div>
                <div class="panel-header"> <div class="panel-title"> 其他信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="商家电话：" prop="phone">
                        <el-input @blur="phone" clearable v-model="form.phone" placeholder="请填写商家电话"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺网址：" prop="website">
                        <el-input clearable v-model="form.website" placeholder="请填写店铺网址"></el-input>
                    </el-form-item>
                    <el-form-item :rules="[{ max: 100, message: '服务范围的长度不能超过100个字', trigger: 'blur' }]" label="服务范围：" prop="service_scope">
                        <el-input type="textarea" rows="5" v-model="form.service_scope"></el-input>
                    </el-form-item>
                    <el-form-item label="服务区域：" prop="service_area">
                        <el-input clearable v-model="form.service_area" placeholder="请填写服务区域"></el-input>
                    </el-form-item>
                    <el-form-item label="文件资源：" prop="qualification">
                        <el-upload class="ad-uploader" name="file"
                                :action="upload_file"
                                :show-file-list="false"
                                :limit="1"
                                :on-success="uploadFileSuccess"
                                :before-upload="uploadFileBefore">
                            <div style="border: 1px solid #ccc; padding: 0 5px;" v-if="form.qualification">@{{ form.qualification }}</div>
                            <i v-else class="el-icon-plus ad-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="地区：" prop="region_id">
                        <el-input clearable v-model="form.region_id" placeholder="请填写地区"></el-input>
                    </el-form-item>
                    <el-form-item label="地区名称：" prop="area_info">
                        <el-input clearable v-model="form.area_info" placeholder="请填写地区名称"></el-input>
                    </el-form-item>
                    <el-form-item label="好评率：" prop="credit">
                        <el-input clearable v-model="form.credit" placeholder="请填写好评率"></el-input>
                    </el-form-item>
                    <el-form-item label="收藏量：" prop="collections">
                        <el-input clearable v-model="form.collections" placeholder="请填写收藏量"></el-input>
                    </el-form-item>
                    <el-form-item label="销量：" prop="sales">
                        <el-input clearable v-model="form.sales" placeholder="请填写销量"></el-input>
                    </el-form-item>
                    <el-form-item label="运营时间：" prop="workingtime">
                        <el-date-picker
                                size="medium"
                                v-model="datetime"
                                type="daterange"
                                @change="pickerChange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item required label="推荐：" required prop="recommend">
                        <el-radio-group v-model="form.recommend">
                            <el-radio :label="1" border>正常</el-radio>
                            <el-radio :label="2" border>推荐</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item required label="状态：" required prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1" border>正常</el-radio>
                            <el-radio :label="2" border>待审核</el-radio>
                            <el-radio :label="3" border>未通过</el-radio>
                            <el-radio :label="4" border>关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <el-form-item style="padding-left: 150px;margin-top: 50px">
                    <el-button type="primary" @click="update()">确 定</el-button>
                    <el-button @click="back()" style="margin-left: 50px">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('neditor/neditor.config.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.all.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.service.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/i18n/zh-cn/zh-cn.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    {{--级联多选--}}
    <script src="{{ asset('//unpkg.com/element-ui@2.9.2/lib/index.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function () {
                    return {
                        info: {!! $info !!},
                        upload_image: UPLOAD_IMAGE,
                        upload_file: UPLOAD_FILE,
                        datetime:{!! $date !!},
                        form: {
                            id: " {{ $id }}",
                            store_name: '',
                            grade: 0,
                            cate_id: '',
                            seller_name: '',
                            region_id: 0,
                            area_info: '',
                            service_scope: '',
                            service_area: '',
                            sort: 0,
                            logo: '',
                            website: '',
                            description: '',
                            phone: '',
                            qualification: '',
                            credit: 0.00,
                            collections: 0,
                            sales: 0.00,
                            workingtime: '',
                            recommend: 1,
                            status: 2,
                        },
                        editor: null,
                        categoys: {!! $categorys !!},
                        props: { multiple: true },
                    }
                },
                created() {
                    this.editor = UE.getEditor('editor');
                    let that = this;
                    if (this.form.id > 0) {
                        this.form = {
                            id: this.info.id,
                            store_name: this.info.store_name,
                            grade: this.info.grade,
                            cate_id: this.info.cate_id,
                            seller_name: this.info.seller_name,
                            region_id: this.info.region_id,
                            area_info: this.info.area_info,
                            service_scope: this.info.service_scope,
                            service_area: this.info.service_area,
                            sort: this.info.sort,
                            logo: this.info.logo,
                            website: this.info.website,
                            description: this.info.description,
                            phone: this.info.phone,
                            qualification: this.info.qualification,
                            credit: this.info.credit,
                            collections: this.info.collections,
                            sales: this.info.sales,
                            workingtime: this.info.workingtime,
                            recommend: this.info.recommend,
                            status: this.info.status,
                        };
                        this.editor.ready(function () {
                            that.editor.setContent(that.form.description);
                        });
                    }
                    this.editor.ready(function () {
                        that.editor.setPlaceholder('请填写店铺介绍描述');
                    });
                },
                methods: {
                    //验证电话号码
                    phone(){
                        if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){
                            return this.$message.error('手机号码有误，请重填!');
                        }
                    },
                    //时间筛选
                    pickerChange() {
                        if (this.datetime) {
                            let start = moment(this.datetime[0]).format('YYYY-MM-DD');
                            let end = moment(this.datetime[1]).format('YYYY-MM-DD');
                            this.form.workingtime = start + ' - ' + end;
                        } else {
                            let start = '';
                            let end = '';
                            this.form.workingtime = start + ' - ' + end;
                        }
                    },
                    //上传图片
                    uploadSuccess(res) {
                        this.form.logo = res.data.path;
                    },
                    uploadBefore(file) {
                        const isLt2M = file.size / 1024 / 1024 < 2;
                        if (!isLt2M) {
                            this.$message.error('图片大小不能超过 2MB!');
                        }
                        return isLt2M;
                    },
                    //上传文件
                    uploadFileSuccess(res) {
                        this.form.qualification = res.data.path;
                    },
                    uploadFileBefore(file) {
                    },
                    //返回
                    back() {
                        window.history.go(-1);
                    },
                    //更新
                    update() {
                        this.form.description = this.editor.getContent();
                        this.form._token = "{{csrf_token()}}";
                        this.$refs['form'].validate((valid) => {
                            if (!this.form.description) {
                                this.$refs.form.fields[3].error = "请填写店铺介绍描述";
                                return false;
                            }
                            if (valid) {
                                let that = this;
                                $.post("{{ route('admin.store.update') }}", this.form, function (res) {
                                    if (res.code) {
                                        that.$message.error(res.msg);
                                    } else {
                                        that.$message({
                                            type: 'success',
                                            duration: '1000',
                                            message: res.msg,
                                            onClose: () => {
                                                window.history.go(-1);
                                            }
                                        });
                                    }
                                }, 'JSON');
                            }
                        });
                    },
                }
            });
        })
    </script>
@endsection
